<template>
  <view>
    <view class="flex-col justify-start page">
      <view class="flex-col justify-start relative section">
        <view class="flex-col justify-start section_2">
          <view class="flex-col section_3">
            <image
              class="shrink-0 self-end image_3"
              src="@/static/images/bg/1.png"
            />
            <view
              class="flex-col justify-start items-start self-stretch relative group"
            >
              <image class="image_7" src="@/static/images/bg/2.png" />
              <image class="image_4 pos_3" src="@/static/images/bg/3.png" />
            </view>
          </view>
        </view>
        <view class="flex-col justify-start items-center image-wrapper pos">
          <image class="image" src="@/static/images/bg/4.png" />
        </view>
        <view class="flex-row justify-between group_2 pos_4">
          <view
            class="flex-col justify-start items-center self-start relative group_3"
          >
            <image class="image_5" src="@/static/images/bg/5.png" />
            <image class="image_8 pos_5" src="@/static/images/bg/6.png" />
          </view>
          <view class="flex-col justify-start items-center relative group_4">
            <image class="image_6" src="@/static/images/bg/7.png" />
            <image class="image_9 pos_6" src="@/static/images/bg/8.png" />
          </view>
        </view>
        <image class="shrink-0 image_2 pos_2" src="@/static/images/bg/9.png" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.page {
  background-color: #fefff9;
  width: 100%;
  overflow-y: hidden;
  overflow-x: hidden;
  height: 100%;
  .section {
    padding-bottom: 636rpx;
    overflow: hidden;
    background-color: #fffffa;
    .section_2 {
      padding-bottom: 120rpx;
      background-image: linear-gradient(180deg, #fff8c7 0%, #fff9c800 97.7%);
      .section_3 {
        padding: 48rpx 0 600rpx;
        background-image: url("@/static/images/bg/10.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        height: 1236rpx;
        .image_3 {
          width: 428rpx;
          height: 404rpx;
        }
        .group {
          margin-top: -256rpx;
          padding: 160rpx 0 48rpx;
          .image_7 {
            width: 130rpx;
            height: 232rpx;
          }
          .image_4 {
            width: 350rpx;
            height: 440rpx;
            position: absolute;
            left: 0;
            bottom: 0;
          }
        }
      }
    }
    .pos {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      .image {
        width: 100vw;
        height: 265.6vw;
      }
      opacity: 0.73;
      background-image: url("@/static/images/bg/11.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .pos_4 {
      opacity: 0.5;
      overflow: hidden;
      position: absolute;
      left: 0;
      right: 0;
      top: 343.44rpx;
      .group_3 {
        padding-bottom: 40rpx;
        width: 210rpx;
        .image_5 {
          width: 210rpx;
          height: 350rpx;
        }
        .image_8 {
          width: 142rpx;
          height: 238rpx;
          position: absolute;
          left: 0;
          bottom: 0;
        }
      }
      .group_4 {
        padding-bottom: 64rpx;
        width: 248rpx;
        .image_6 {
          width: 248rpx;
          height: 574rpx;
        }
        .image_9 {
          width: 137.98rpx;
          height: 390rpx;
          position: absolute;
          right: 0;
          bottom: 0;
        }
      }
    }
    .pos_2 {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      opacity: 0.6;
      mix-blend-mode: MULTIPLY;
      width: 100vw;
      height: 265.6vw;
    }
  }
}
</style>
